import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite';
import autoprefixer from 'autoprefixer'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import compression from 'vite-plugin-compression'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteImagemin from 'vite-plugin-imagemin';

// https://vite.dev/config/
export default defineConfig({
  // chainWebpack is not supported in Vite, removed to prevent errors
  server: {
    proxy: {
      // 本地后端代理
      "/blogapi": {
        //要访问的跨域的域名
        target: process.env.VITE_API_URL || "http://121.41.239.73:3000/", //代理目标地址
        // target: process.env.VITE_API_URL || "http://localhost:3000/", //代理目标地址
        changeOrigin: true, //是否开启代理
        // Rewrites the URL path by removing the '/api' prefix to match the backend endpoint structure
        rewrite: (path) => path.replace(/^\/blogapi/, ""), //重写目标地址
        secure: false, // 如果目标服务器是 HTTPS 并且证书有问题，可以设为 false
        configure: (proxy) => {
          // console.log("ppppppppppp", proxy);
          proxy.on("proxyReq", (err) => {
            console.log("代理服务器错误：", err);
          });
        } 
      },
    },
    // port: 8080, // 配置前端项目启动端口
    // host: "0.0.0.0",
    // open: true, // 启动后自动打开浏览器
    // // 热更新
    // hmr: {
    //   overlay: false,
    // },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      // "@assets": resolve(__dirname, "./src/assets"),
      // "@components": resolve(__dirname, "./src/components"),
      // "@views": resolve(__dirname, "./src/views"),
      // "@router": resolve(__dirname, "./src/router"),
      // "@store": resolve(__dirname, "./src/stores"),
      // "@utils": resolve(__dirname, "./src/utils"),
      // "@styles": resolve(__dirname, "./src/assets/styles"),
    },
    // 配置可省略的扩展名
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  plugins: [
    vue(),
    tailwindcss(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: "Icon", // 组件前缀
          alias: {
            // 别名映射
            system: "system-uicons",
          },
          // {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
          // alias: { park: 'icon-park' } 集合的别名
          // enabledCollections: ['ep'] // 这是可选的，默认启用 Iconify 支持的所有集合['mdi']
        }),
      ],
      // 可添加其他自动导入
      imports: ["vue", "vue-router"],
    }),
    // 自动注册组件
    Components({
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver({
          importStyle: "sass", // 使用 sass 样式源文件（主题定制需要）
        }),
      ],
      dirs: ['src/components'], // 指定要扫描的组件目录
      // 组件名称转换规则（PascalCase 或 kebab-case）
      directoryAsNamespace: true,
      // 排除文件
      exclude: [/node_modules/],
      extensions: ['vue'], // 扫描的文件扩展名
      deep: true, // 启用深度扫描
      dts: true, // 生成 components.d.ts 类型声明
    }),
    Icons({
      compiler: "vue3", // 指定编译器（vue2 或 vue3）
      // 实验性功能 当您导入图标时，它会自动检测合适的包管理器（npm、yarn 或 pnpm）来安装图标集。
      autoInstall: true,
    }),
    createSvgIconsPlugin({
      // 指定 SVG 图标目录（必须）
      iconDirs: [resolve(process.cwd(), "src/assets/icons/svg")],
      // 指定 Symbol ID 的生成规则（可选）
      symbolId: "icon-[dir]-[name]",
      // 自定义插入位置（可选）
      inject: "body-last",
      // 是否启用 svgo 压缩（可选，默认 true）
      svgoOptions: true,
    }),
    compression({
      algorithm: 'gzip',
      threshold: 10240, // 压缩阈值 10KB
      ext: '.gz',
      deleteOriginFile: false,
    }),
    // 添加图片压缩插件
    viteImagemin({
      verbose:process.env.NODE_ENV === 'production', // 是否在控制台输出压缩结果
      gifsicle: {
        optimizationLevel: 3, // 优化等级 1-9
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7 // 优化等级 1-7
      },
      mozjpeg: { // jpeg 图片优化
        quality: 80, // 压缩质量 0-100
        progressive: true, // 渐进式压缩
        arithmetic: true, // 算术编码
        color: {
          quality: 80 // 颜色质量 0-100
        }
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name:'preset-default',
            params: {
              overrides: {
                removeViewBox: false,
                cleanupIDs:false
              }
            }
          },
          'removeDimensions', // 移除图片尺寸属性
        ]
      }
    })
  ],
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
    codeSplitting: true, // 添加css代码分割
  },
  // 打包输出
  build: {
    sourcemap: false,
    // 设置更小的 chunk 大小警告限制
    chunkSizeWarningLimit: 1000,
    // 启用 gzip 压缩大小报告
    reportCompressedSize: true,
    // 设置打包大小警告的限制为 4MB
    assetsInlineLimit: 4096,
    // 启用压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        // 生产环境移除console
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log', 'debugger'], // 移除特定函数
      },
    },
    rollupOptions: {
      input: {
        index: resolve("index.html"),
      },
      output: {
        // 静态资源分类打包
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        // 分包策略
        manualChunks: {
          // 将 node_modules 中的代码单独打包
          vendor: ['vue', 'vue-router', 'pinia'],
          // // 将组件库单独打包
          'element-plus': ['element-plus'],
          'markdown-editor':['md-editor-v3'],
          'utils':['axios', 'dayjs', '@vueuse/core'],
          // 动态分包策略
        },
        compact: true, // 压缩代码
        // 添加构建缓存
        emptyOutDir: true,
      },
    },
  },
});
